<template>
	<view>
		<scroll-view class="main">
			<!-- 下单弹窗 -->
			<view class="maskClass" v-show="showMask" >
			    <view v-show="showMask" style="width:70%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 30% auto;z-index: 1;">
					<!-- <view style="text-align: center;">
						<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center" >	请选择</text>
					</view>
			        <view style="width: 100%;margin-top:35rpx;" class="uni-list">
			        	<radio-group style="font-size: 25rpx;" @change="change">
			        	  <radio value="0" />
			        	  在线预约
			        	  <radio value="1" checked style="margin-left: 35rpx;" />
			        	  立即下单
			        	</radio-group>
			        </view>
					<view class="login_from_input">
						<view class="form-left">服务时间</view>
						<view class="login_from_fun">
							<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view style="font-size: 25rpx; float:left;">{{ date || '请选择服务时间' }}</view>
							</picker>
						</view>
					</view> -->
					<view class="login_from_input">
						<text>咨询内容</text>
						<view class="form-left">
							
						</view>
						<view class="login_from_fun" style="height: 200rpx;"><input	 v-model="consultInfo.content" placeholder="请输入咨询内容"></view>
					</view>
					<!-- <view class="login_from_input">
						<view class="form-left">联系电话</view>
						<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.userTelphone" placeholder="请输入联系电话"></view>
					</view> -->
					<view class="submit_view">
						<button type="primary" class="submit" @click="submitOrder()">提交</button>
						<button type="warn" class="canncle" @click="closePopup()">取消</button>
					</view>
			    </view>
			</view>
			<view>
				<!-- 成果详情 -->
				<view class="top">
					<text class="title">{{cgzhDetail.xmmc}}</text>
					<!-- <uni-tag text="立即下单" type="primary" style="margin-right: 15rpx; 
					width: 80px;text-align: center; float:right" @click="dial()"></uni-tag> -->
					
				</view>
				<view class="type">
					<text class="creator">登记单位：{{cgzhDetail.cgcyfmc}}</text>
			<!-- 		<text class="publishTime">登记时间：{{cgzhDetail.createTime}}</text> -->
				</view>
				<!-- <view class="type">
					<text class="creator">课题来源：{{cgzhDetail.topicSource}}</text>
				</view> -->
				<scroll-view class="content">
					<view style="display: flex;width: 100%;float: left;">
						<text style="font-size: 30rpx;font-weight: 700;color: blue; float: left;">简介</text>
						<button style="margin-right: 25rpx; width: 100px;text-align: center; float:right" type="primary" size="mini" @click="toggle('center')">立即咨询</button>
					</view>
					<view style="display: flex;width: 100%;float: left;">
						<text style="margin-top: 25rpx;">
							{{cgzhDetail.cgnrjzms}}
						</text>
					</view>
					<view v-if="cgzhDetail.yqjjxy != null" style="display: flex;width: 100%;float: left;">
						<text style="margin-top: 25rpx;">
							{{cgzhDetail.yqjjxy}}
						</text>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import env from '@/utils/env.js';
	import * as dict from '@/api/system/dict/data.js'
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	import * as cgzh from '@/api/source/kjcg/kjcgzh.js'
	import * as cgdj from '@/api/source/kjcg/cgdjk.js'
	import * as codeList from '@/utils/code.js'
	export default {
	  components: {
		orderTabBar,
	  },
	  data() {
		return {
			id:'',
			cgzhDetail:{},
			orderInfo:{
					details: '',//订单详情描述
					orderType: '',//订单类型
					serverId: '',//服务ID
					serverName: '',//服务名称
					subscribeDate: '',//预约时间
					userId: '',//下单人ID
					userName: '',//下单人名字
					userTelphone:''//下单人电话
			},
			showMask: false,
			consultInfo:{
				content: "",
				laboratoryname: "",
				recipientName: "",
				recipientTel: "",
				relationId: "",
				type: "",
			}
		}
	  },
	  onShow() {
		// let _this = this
		// _this.getOrderList()
	  },
	  onLoad(option) {
	  	this.id = option.id
		this.getcgzhDetail()
	  },
	  mounted() {
		
	  },
	  methods: {
		// tab切换
		clickTabBar(index, status) {
		  this.currentIndex = index
		  this.currentStatus = status
		  this.orderList = [];
		  this.getOrderList()
		},
		getDict(){
			dict.getDicts('xmyq').then((res)=>{
				this.jsspDict = res.data
			})
			dict.getDicts('tzfs').then((res)=>{
				this.tzfsDict = res.data
			})
			dict.getDicts('cms_industry_type').then((res)=>{
				this.cylyDict = res.data
			})
		},
		// 加载订单列表
		getcgzhDetail() {
			console.log("详情")
			uni.showLoading({
				title:"加载中。。。"
			})
			this.noData = '加载中。。。'
			cgzh.getcgzhDetail(this.id).then((res)=>{
				this.cgzhDetail = res.data
			})
			uni.hideLoading({});
		},
		cgDetail(id){
			uni.navigateTo({
				url:"/subpages/pages/detail/cgdj_detail?id="+id +"page="+this.currentIndex
			})
	  },
	  toggle(type) {
	      // this.type = type;
	      // this.$refs['popup'].open();
	  	this.showMask = true
	  	this.getUser()
	  },
	  closePopup(){
	  	this.showMask = false
	  },
	  change(e) {
	  },
	  bindDateChange(e) {
	  	this.date = e.detail.value;
	  },
	  submitOrder(){
	  	if(this.consultInfo.content == ''){
	  		uni.showToast({
	  			icon:"none",
	  			title:"咨询内容不能为空！"
	  		})
	  	}else{
	  		this.consultInfo.laboratoryname = this.cgzhDetail.xmmc
	  		this.consultInfo.recipientName = this.cgzhDetail.lxr
	  		this.consultInfo.recipientTel = this.cgzhDetail.lxrdh
			this.consultInfo.relationId = this.cgzhDetail.id
			this.consultInfo.type = "1" 
	  		cgdj.submitConsult(this.consultInfo).then((res)=>{
	  			uni.showToast({
	  				title:'提交成功！'
	  			})
				this.showMask = false
	  		})
	  	}
	  },
	  getUser(){
	  	var value = uni.getStorageSync('userInfo')||[]
	  	if(value.login_user == null){
	  		uni.showToast({
	  			icon:'none',
	  			title:'请先登录！'
	  		})
	  		this.showMask = false
	  		uni.navigateTo({
	  			url:'/subpages/pages/register/login_province'
	  		})
	  	}else{
			
	  	}
	  },
	  },
	  computed: {
			
	  }
	}
</script>

<style>
	
		.main {
			background-color: #e1e1e1;
		}
		
		image {
			width: 100%;
		}
		
		.top{
			/* position: fixed; */
			margin-top: 30rpx;
			background-color: #fff;
		}
		
		.type{
			/* position: fixed; */
			height:80rpx;
			background-color: #fff;
			margin-top: 15rpx;
			padding-top: 15rpx;
		}
		
		.content{
			/* position: fixed; */
			width: 93%;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			line-height: 50rpx;
			background-color: #fff;
			padding: 25rpx;
		}
		
		.title {
			display: -webkit-box;
			width: 97%;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 30rpx;
			font-weight: 700;
			padding: 15rpx;
		}
		
		.creator {
			font-size: 28rpx;
			padding: 15rpx;
			float: left;
		}
		
		.publishTime {
			font-size: 28rpx;
			padding: 15rpx;
			float: right;
		}
		
		.detail_content {
			margin-top: 15rpx;
	/* 		text-indent: 2em; */
			line-height: 50rpx;
			justify-content: flex-start;
			padding: 25rpx;
		}
		
		.uni-form-item {
			margin: 60rpx 30rpx;
			border-radius: 50px;
			}
			
		.uni-form-item button{
			background-color: #016fb8;
			height: 70rpx;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
		
		.login_from_input{
			width: 100%; 
			height:auto; 
			display: flex; 
			flex-direction: row; 
			justify-content: space-between; 
			align-items: center; 
			border-bottom: 1px #eee solid; 
			padding: 20upx 0px; 
			margin: 0px auto; 
			background-color: #fff;
		} 
		
		.login_from_name{
			width: 30%; 
			margin-left: 40rpx;
			font-size: 30rpx;
		}
		.login_from_fun{ 
			width: 70%; 
			display: flex; 
			flex-direction: row; 
			justify-content: flex-end; 
			text-align: right; 
			margin-left: 25rpx;
		}
		
		.login_from_fun input{ 
			width: 100%; 
			text-align: left; 
			font-size: 14px;  
		}
		
		/deep/ .uni-popup .uni-popup__wrapper {
		    width: 70% !important;
			margin: 0 auto;
		}
		
		.submit_view {
			height: 90rpx;
		}
			
		.submit_view .submit{
			background-color: #016fb8;
			height: 70rpx;
			width: 40%;
			font-size: 28rpx;
			margin-top: 20rpx;
			float: left;
		}
		.submit_view .canncle{
			background-color: darkgray;
			height: 70rpx;
			width: 40%;
			font-size: 28rpx;
			margin-top: 20rpx;
			float: right;
		}
		
		.maskClass {
			position:fixed;
			bottom:0;
			top:0;
			left:0;
			right:0;
			background-color:rgba(0, 0, 0, 0.5);
			z-index: 2;
		}	
</style>